import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
Rectangle{

    Layout.alignment: Qt.AlignCenter
    property int offset: 10
    property string buttonName
    property alias mouseA: mousea
    property alias light: indicatorLight
    id:rectBtn
    width: 80
    height: 70
    color: "black"
    Rectangle{
        id:indicatorLight
        x:offset
        y:offset / 2
        width: parent.width - offset * 2
        height: offset
        color:"#4d4d4d"
    }
    Text{
        id:buttonText
        anchors.left:parent.left
        anchors.leftMargin: parent.width/2 - buttonText.contentWidth /2
        anchors.top: indicatorLight.bottom
        anchors.topMargin: 20
        text:buttonName
        font.bold: true
        font.pointSize: 16
        color: "white"
        Layout.alignment: Qt.AlignCenter | Qt.AlignVCenter
    }
    MouseArea {
        id:mousea
        anchors.fill: parent
        onClicked: {
            if(indicatorLight.color == "#4d4d4d")
            {
                indicatorLight.color = "green"
            }
            else{
                indicatorLight.color = "#4d4d4d"
            }
        console.log("Thebuttonispressed!")
        }
    }
}


